<template>
  <div class="common-layout">
    <HeadContent title="部门信息管理"></HeadContent>
    <TagComtent></TagComtent>
    <el-container>
      <el-main>
        <el-space wrap :size="size">
          <div class="flex flex-wrap gap-4">
            <el-card style="width: 150vh" shadow="hover">
              <el-form :model="form" :inline="true" class="demo-form-inline">
                <el-form-item label="名称">
                  <el-input v-model="sousuo.deptName" />
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="sousuo.status" placeholder="---请选择---">
                    <el-option label="活动" value="活动" />
                    <el-option label="撤销" value="撤销" />
                  </el-select>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="sousuoDept"><el-icon>
                      <Search />
                    </el-icon >&nbsp;搜索</el-button>
                  <el-button type="primary" @click="$router.push('/adddept')"><el-icon>
                      <CirclePlus />
                    </el-icon>&nbsp;新增部门</el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>

          <el-card style="width: 150vh" shadow="hover">
            <el-table :data="DeptList" style="width: 100%">
              <el-table-column fixed prop="deptId" label="部门编号" width="100" />
              <el-table-column prop="deptName" label="部门名称" width="120" />
              <el-table-column prop="empId" label="部长编号" width="100" />
              <el-table-column prop="leader" label="部长姓名" width="120" />
              <el-table-column prop="status" label="状态" width="100" />
              <el-table-column prop="allPeople" label="编制" width="130" />
              <el-table-column prop="deptSuper" label="上级部门" width="100" />
              <el-table-column fixed="right" label="操作" min-width="250" align="center">
                <template #default="scope"  style="display: flex" >
                  <el-button type="primary" size="100px" @click="handleSelect(scope.row)">
                    <el-icon>
                      <View />
                    </el-icon>&nbsp;查看
                  </el-button>
                  <el-button type="warning" plain @click="showDeptInfo(scope.row)">
                    <el-icon><Refresh /></el-icon>&nbsp;修改
                  </el-button>
                  <div v-if="scope.row.status=='撤销'" class="CaozuoDiv">
                    <el-button type="primary" @click="flagChange(scope.row)"><el-icon>
                        <Plus />
                      </el-icon>&nbsp;恢复</el-button>
                  </div>
                  <div v-else class="CaozuoDiv">
                    <el-button type="danger" @click="flagChange(scope.row)"><el-icon>
                        <Minus />
                      </el-icon>&nbsp;注销</el-button>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </el-card>

          <!-- 分页 -->
           
          <el-pagination background layout="prev, pager, next" :total="10"  />
        </el-space>
      </el-main>
    </el-container>
  </div>
   <!--弹出框内容-->
   <el-dialog v-model="dialogFormVisible" title="部门信息" width="500">
    <el-form :model="updateform">
      <el-form-item label="部门名称：" :label-width="formLabelWidth">
        <el-input v-model="DeptInfo.deptName" />
      </el-form-item>
      <el-form-item label="负责人员工编号：" :label-width="formLabelWidth">
        <el-input v-model="DeptInfo.deptLeader" />
      </el-form-item>
      <el-form-item label="部门编制：" :label-width="formLabelWidth">
        <el-input v-model="DeptInfo.allPeople" />
      </el-form-item>
      <el-form-item label="上级部门" :label-width="formLabelWidth">
        <el-select v-model="DeptInfo.deptSuper" placeholder="请选择">
          <el-option v-for="dept in DeptList" :key="dept.deptId" :label="dept.deptName":value="dept.deptId"/>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">返回</el-button>
        <el-button type="primary" @click="updateInfo(DeptInfo)">
         提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import {  reactive } from 'vue'
import {
  View, Refresh,Plus,Minus,CirclePlus,
  Search
} from '@element-plus/icons-vue'
import TagComtent from '@/components/TagComtent.vue'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const updateform = reactive({
  deptName: '',
  responsiblePersonNum:'',
  deptNum:'',
  fatherDept:'',
})
function doDialogFormVisible() {
  dialogFormVisible.value = true;
  updateform.deptName = '';
  updateform.responsiblePersonNum = '';
  updateform.deptNum = '';
  updateform.fatherDept = '';
}
import HeadContent from '@/components/HeadContent.vue'
import type {DeptInfo} from '@/model'
import {selectDeptInfo} from '@/api/dept'
import {select} from '@/api/dept'
import type {updateDept} from '@/model'
import {updateDeptInfo} from '@/api/dept'
import { useRoute } from 'vue-router'
import {updateStatusfn} from '@/api/dept'

// do not use same name with ref
const form = reactive({
  name: '',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
})



const DeptList = ref<DeptList[]>([])
  const getDeptList = async () => {
  const res = await getDeptListInfo()
  DeptList.value = res.data
  console.log(DeptList.value)
}
getDeptList()
//状态恢复按钮
const flag = ref<boolean>(true)

const flagChange =  async (scope:DeptList) => {
  const status = ref<string>(scope.status)
  console.log(status.value)
 if(status.value=='撤销'){
    const res = await updateStatusfn(scope.deptId,'活动')
    getDeptList()
    ElMessage.success('恢复成功')
 }else{
  const res = await updateStatusfn(scope.deptId,'撤销')
  getDeptList()
  ElMessage.success('注销成功')
 }
}


// 搜索功能
const sousuo=ref(
  {
    deptName:'',
    status:'',
  }
)
const sousuoDept = async () => {
  const res = await select(sousuo.value.deptName,sousuo.value.status)
  DeptList.value = res.data
  console.log(DeptList.value)
  
}

//弹窗回显
const showDeptInfo = async (row:DeptList) => {
  DeptInfo.value.deptId = row.deptId
  DeptInfo.value.deptName = row.deptName
  DeptInfo.value.deptLeader = row.empId
  DeptInfo.value.allPeople = row.allPeople
  DeptInfo.value.deptSuper = row.deptId
  dialogFormVisible.value = true;
}
//弹窗属性
const route = useRoute()
const DeptInfo=ref<updateDept>({
  deptId:0,
  deptName:'',
  deptLeader:0,
  allPeople:0,
  deptSuper:0,
})
//实现修改功能 
const updateInfo = async (DeptInfo:updateDept) => {
  const res = await updateDeptInfo(DeptInfo)
 
  
    dialogFormVisible.value = false;
    ElMessage.success('修改成功')
    getDeptList()

}



const handleSelect = (row: DeptList) => {
  router.push({path:'/selectdept',query:{deptId: row.deptId}})
}
// const tableData = [
//   {
//     date: '2016-05-03',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Home',
//   },
//   {
//     date: '2016-05-02',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Office',
//   },
//   {
//     date: '2016-05-04',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Home',
//   },
//   {
//     date: '2016-05-01',
//     name: 'Tom',
//     state: 'California',
//     city: 'Los Angeles',
//     address: 'No. 189, Grove St, Los Angeles',
//     zip: 'CA 90036',
//     tag: 'Office',
//   },
// ]

import { ref } from 'vue'
import router from '@/router'
import type { DeptList } from '@/model'
import { getDeptListInfo } from '@/api/dept'

const size = ref(40)
</script>
<style scoped>
.demo-form-inline .el-input {
  --el-input-width: 200px;
}

.demo-form-inline .el-select {
  --el-select-width: 200px;
}
.CaozuoDiv {
  margin-left: 12px;
  display: inline-block;
}
</style>
